<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="项目ID" prop="projectId">
        <el-input style="width: 125px" v-model="queryParams.projectId" placeholder="请输入项目ID" clearable @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item label="项目名称" prop="projectName">
        <el-input style="width: 140px" v-model="queryParams.projectName" placeholder="请输入项目名称" clearable @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item  label="创建时间" prop="createTime">
        <el-date-picker style="width: 350px" v-model="queryParams.createTime" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
      </el-form-item>
      <el-form-item  label="创建者" prop="userId">
        <el-input style="width: 125px" v-model="queryParams.userId" placeholder="请输入创建者" clearable @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['system:notice:add']">新增</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="noticeList">
      <el-table-column label="项目ID" align="center" prop="projectId" width="170" />
      <el-table-column label="项目名称" align="center" prop="projectName" :show-overflow-tooltip="true"/>
      <el-table-column label="项目简介" align="center" prop="projectIntroduce" :show-overflow-tooltip="true"/>
      <el-table-column label="创建者ID" align="center" prop="userId" width="100" />
      <el-table-column label="创建时间" align="center" prop="createTime" width="170">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{m}:{s}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="更新时间" align="center" prop="updateTime" width="170">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.updateTime, '{y}-{m}-{d} {h}:{m}:{s}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getListByPage"/>
    <el-dialog title="修改信息" :visible.sync="open" width="30%" center :close-on-click-modal="false">
      <div style="text-align: center">
       <form>
         <tr>
           <td>项目名字:</td>
           <td>
             <el-input maxlength="10" show-word-limit style="padding: 10px;width: 300px" v-model="dialogForm.projectName" placeholder="请输入内容"></el-input>
           </td>
         </tr>
         <tr>
           <td style="vertical-align: middle;">项目简介:</td>
           <td><el-input type="textarea" :rows="2"  maxlength="30" show-word-limit style="padding: 10px;width: 300px" v-model="dialogForm.projectIntroduce" ></el-input></td>
         </tr>
       </form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="changeCancel">取 消</el-button>
        <el-button type="primary" @click="sureUpdateMessage">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="新增项目" :visible.sync="addProject" width="30%" center :close-on-click-modal="false">
      <div style="text-align: center">
        <form>
          <tr>
            <td>项目名字:</td>
            <td>
              <el-input maxlength="10" show-word-limit style="padding: 10px;width: 300px" v-model="addCondition.projectName" placeholder="请输入内容"></el-input>
            </td>
          </tr>
          <tr>
            <td style="vertical-align: middle;">项目简介:</td>
            <td><el-input type="textarea" :rows="2"  maxlength="30" show-word-limit style="padding: 10px;width: 300px" v-model="addCondition.projectIntroduce" placeholder="请输入内容"></el-input></td>
          </tr>
        </form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="changeCancel">取 消</el-button>
        <el-button type="primary" @click="sureAddProject">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>

import {getListByPage, handDelete, sureAddProject, sureUpdateMessage} from "@/api/wlwsys/jintao/main";
import {parseTime} from "../../../utils/ruoyi";
export default {
  name: 'project',

  data() {
    return {
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 公表格数据
      noticeList: [],
      // 弹出层标题
      title: "请修改信息",
      // 是否显示弹出层
      open: false,
      addProject:false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        projectName:null,
        userId:null,
        createTime:null
      },
      // 表单参数
      form: {
        projectName:null,
        projectId: null,
        projectIntroduce:null,
      },
      dialogForm:{
        projectName:null,
        projectId: null,
        projectIntroduce:null,
      },
      //新增项目的条件
      addCondition:{},
    };
  },
  created() {
    this.getListByPage()
  },
  methods: {
    parseTime,
    getListByPage(){
      if(this.queryParams.createTime===null){
        this.queryParams.createTime = ["",""]
      }
      getListByPage(this.queryParams).then(response=>{
        this.total = response.total
        this.noticeList = []
        for(var i=0;i<response.rows.length;i++){
          var temp = {
            projectId : response.rows[i].projectId,
            projectName : response.rows[i].projectName,
            projectIntroduce: response.rows[i].projectIntroduce,
            userId: response.rows[i].userId,
            createTime:response.rows[i].createTime,
            updateTime:response.rows[i].updateTime,
          }
          this.noticeList.push(temp)
        }
      })
    },
    handleQuery(){
      this.getListByPage();
    },
    //删除数据办法
    handleDelete(project){
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        handDelete(project.projectId).then(response=>{
          this.getListByPage()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //更新数据办法
    handleUpdate(project){
      this.dialogForm.projectName=project.projectName
      this.dialogForm.projectIntroduce=project.projectIntroduce
      this.dialogForm.projectId = project.projectId
      this.open = true
    },
    changeCancel(){
      this.open = false
      this.addProject = false
      this.addCondition = {}
    },
    //确定修改
    sureUpdateMessage(){
      this.form = this.dialogForm
      sureUpdateMessage(this.form).then(response=>{
        this.getListByPage()
        this.form = {}
        if (response===true){
          this.$message({
            type: 'success',
            message: '修改成功'
          });
        }else {
          this.$message({
            type: 'warning',
            message: '修改失败，请稍后再试'
          });
        }
      })
      this.open = false
    },
    handleAdd(){
      this.addProject = true;
    },
    sureAddProject(){
      sureAddProject(this.addCondition).then(response=>{
        this.getListByPage()
      })
      this.addCondition = {}
      this.addProject = false;
    }
  }
};
</script>
